<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card">
          <h3>用户数量</h3>
          <div>
            <i class="el-icon-user-solid" style="color: purple"></i>
            <span>{{ counts.users }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <h3>历史订单数量</h3>
          <div>
            <i class="el-icon-star-on" style="color: red"></i>
            <span>{{ counts.bookings }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <h3>酒店数量</h3>
          <div>
            <i class="el-icon-s-shop" style="color: green"></i>
            <span>{{ counts.hotels }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <h3>景区数量</h3>
          <div>
            <i class="el-icon-s-flag" style="color: blue"></i>
            <span>{{ counts.attractions }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="14">
        <el-card class="box-card">
          <echarts1 :counts="counts" />
        </el-card>
      </el-col>
      <el-col :span="9">
        <el-card class="box-card">
          <echarts2 :counts="counts" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getCounts } from '@/api/data/data.js'
import echarts1 from "@/views/data/ECharts/echarts1.vue";
import echarts2 from "@/views/data/ECharts/echarts2.vue";

export default {
  data() {
    return {
      counts: {}
    };
  },
  created() {
    this.fetchCounts();
  },
  methods: {
    async fetchCounts() {
      try {
        getCounts().then(response => {
          console.log(response)
          this.counts = response;
        });
      } catch (error) {
        console.error("Error fetching counts:", error);
      }
    },
  },
  components: {
    echarts1,
    echarts2
  }
};
</script>

<style scoped>
.el-card {
  margin-bottom: 20px;
  text-align: center;
}
</style>
